import * as React from 'react';
import propTypes from 'prop-types';
import {Layout, Spin, Button} from 'antd';
import {BaseComponent} from 'fe-lib';
import {apiIsLoading, apiIsSuccess, apiIsError} from 'shared/utils/reducerUtil';
import Header from './Header';
import 'assets/iconfont/iconfont.css';
import 'assets/style/main.less';
import './index.less';
import Routes from '../routes';

class Component extends BaseComponent {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {};
    // 绑定this
    this.bind();
  }

  componentWillMount() {
    // 当组件完成加载时，需要执行的操作，例如：
    this.props.getLoginInfo();
  }

  render() {
    const {loginInfo} = this.props;
    return (<Spin spinning={apiIsLoading(loginInfo)} className="web-container">
      {apiIsSuccess(loginInfo) ? this.renderSuccess() : this.renderError()}
    </Spin>);
  }

  renderSuccess() {
    const {loginInfo} = this.props;
    return (
      <Layout>
        <Header loginInfo={loginInfo}/>
        <div className="web-container-body">
          <Routes match={this.props.match}/>
        </div>
      </Layout>
    );
  }

  renderError() {
    const {loginInfo} = this.props;
    if (apiIsError(loginInfo)) {
      return this.renderReload();
    } else {
      return (<div style={{height: 300}}/>);
    }
  }

  renderReload() {
    return (
      <div style={{textAlign: 'center'}}>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <Button onClick={() => this.props.getLoginInfo()} type="danger">请求失败，点击重试</Button>
      </div>
    );
  }
}

/** 定义propTypes */
Component.propTypes = {
  /** props */
  loginInfo: propTypes.any,
  /** method */
  getLoginInfo: propTypes.func.isRequired,
};

export default Component;
